
<template>
  <div id="app">
    <MyHeader v-show="page<3"></MyHeader>
    <router-view class="router-view"/>
    <MyTabbar v-show="page<3"></MyTabbar>
  </div>
</template>
<style lang="less">
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  #app{
    height: 100vh;
  }
  .router-view{
      background-color: white;
      height: calc(100vh - 36.1vw);
      width: 100vw;
      overflow-y: scroll;
  }
   .flag{
        color: @c333;
        font-size: @s36;
        margin: @s41 auto @s40 @s20;
        position: relative;
    }
    .flag:before{
        content: '';
        position: absolute;
        left: -@s14;
        top: 1.2vw;
        width: @s6;
        height: @s32;
        display: inline-block;
        background: #609AFF;
        border-radius: 1vw;
    }
    .flag:after{
        content: '';
        display: inline-block;
        position: absolute;
        left: -@s14;
        top: 1.2vw;
        width: @s6;
        height: @s32;
        border-radius: 1vw;
        background-image: linear-gradient(-45deg,rgba(0,0,0,0),#6561ff);
    }
  .title-dot {
      margin: 9.5vw auto @s40 3.3vw;
      font-size: 4.8vw;
      position: relative;
  }
  .title-dot:nth-of-type(1){
      margin-top: 10.1vw;
  }
  .title-dot:before{
      content: '';
      position: absolute;
      left: -3.2vw;
      top: 50%;
      transform: translate(0,-50%);
      display: inline-block;
      width: 1.7vw;
      height: 1.7vw;
      background-color: #6591ff;
      border-radius: 50%;
  }
</style>
<script>
import MyHeader from "./components/MyHeader.vue"
import MyTabbar from "./components/Tabbar.vue"
  export default{
    data(){
      return{
        page:1
      }
    },
    components:{
      MyHeader,
      MyTabbar
    },
    watch:{
      $route(n,o){
        let m = n.path.split("/").length-1;
        this.page = m;
      }
    }
   
  }
</script>
